<template>
  <div ref="ChartBar" class="g-full-chart" />
</template>

<script>
import Vue from 'vue';
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
export default {
  name: 'ChartBar',
  props: {
    lineColor: {
      type: String,
      default: 'rgba(255,255,255,0.3)',
    },
    textColor: {
      type: String,
      default: '#E6F7FF',
    },
    labelColor: {
      type: String,
      default: '#fff',
    },
    itemColor: {
      type: Array,
      default: () => ["#058FE7","#0EECE4"],
    },
    xAxisData: {
      type: Array,
      default: () => [],
    },
    seriesData: {
      type: Array,
      default: () => [],
    },
    unit: {
      type: String,
      default: '张',
    }
  },
  watch: {
    seriesData: {
      handler(){
        this.initChart();
        window.dispatchEvent(new Event('resize'));
      },
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const that = this;
      var lineColor = this.lineColor;
      var textColor = this.textColor;
      var labelColor = this.labelColor;
      var itemColor = this.itemColor;
      const _vw = window.innerHeight / 1080;
      const ChartBar = this.$echarts.init(this.$refs.ChartBar);

      window.addEventListener('resize', () => {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          ChartBar.resize();
        }, 300);
      });

      ChartBar.setOption({
        grid: {
          containLabel: true,
          right: '0',
          left: '3%',
          top: '16%',
          bottom: '3%',
        },
        yAxis: {
          type: 'value',
          name:"单位：" + this.unit,
          nameTextStyle: {
            fontSize: 14*_vw,
            color: "rgba(230, 247, 255, 0.7)"
          },
          axisLine: {
            lineStyle: {
              color: lineColor,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: lineColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: labelColor,
            },
            fontSize: 14*_vw,
          },
          minInterval: 1,
        },
        xAxis: [{
          type: 'category',
          data: that.xAxisData,
          axisLine: {
            lineStyle: {
              color: lineColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: textColor,
            },
            fontSize: 12*_vw,
            margin: 10*_vw
          },

        }],
        series: [
          {
            name: "",
            type: 'bar',
            barWidth: 20*_vw,
            itemStyle: {
              emphasis: {
                barBorderRadius: 8*_vw,
              },
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 0, [{
                    offset: 1,
                    color: itemColor[1],
                  },
                  {
                    offset: 0,
                    color: itemColor[0],
                  },
                  ],
                ),
                label: {
                  show: true, // 显示标签
                  fontSize: 16*_vw,
                  color:"#FDB504",
                  position: 'top', // 标签的位置
                  formatter: '{c}' // 数据内容，{c} 表示系列数据的当前值
                  },
                },
            },
            z: 2,
            data: that.seriesData,
          },
        ],
      });
    },
  },
};
</script>

<style></style>
